<template>
    <div class='content'>

        <section>
            <div class="profile_page">
                    <head-top  :go-back='goBack'  :head-title="profiletitle"></head-top>
            </div>
            <!--<div class="my_backlog" >-->
             <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
                :offset="offset"
              >
                <div  v-for="item in remainData" :key="item.remId">
                <van-cell :id="item.remId" @click.stop="readMsg(item.remCond)" :title="item.remMsg" is-link   />
                </div>
             </van-list>
        </section>
    </div>
</template>

<script>
    import headTop from '@/components/header/head';
    import {myRemaind} from '@/service/getData';
    import {getStore} from '@/assets/config/mUtils';
    import { Dialog,Toast } from 'vant';
    export default {
    	data(){
            return{
                profiletitle:'我的提醒',
                goBack:true,
                CHECK_TIME: new Date().getTime().toString(),
                app_userId:'',
                remainData:[],
                loading: false,
                finished: false,
                pageIndex:0,
                offset: 0,
            }
        },
        created(){
    	    this.app_userId = getStore('user_id');
        },
        mounted(){


        },
        props: ['imgSrc', 'menuTitle'],
        components:{
            headTop,
        },
        methods:{
          onLoad(){
            var data ={};
//             data.app_userId = this.app_userId;
//             data.CHECK_TIME = this.CHECK_TIME;
//             data.CHECK_SIGN = this.$md5(this.app_userId + this.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
           data.pageIndex = this.pageIndex;
           data.pageSize = 16;
	          myRemaind(data).then(res=>{
              // 加载状态结束
             this.loading = false;
             this.offset = 16 * this.pageIndex;
             if(this.remainData.length<res.data.total){
                this.remainData = this.remainData.concat(res.data.remList) ;
             }else {
               this.finished = true;
             }
						 console.log(this.remainData )
            });
           this.pageIndex+=1;
          },
          readMsg(id){
	          this.$router.push(
		          { name: 'remindDetail', params: { id:id}}
	          );
          }
        }
    }

</script>

<style lang="scss" scoped>
    @import '../../assets/style/mixin';
      @import '../../assets/style/public';
      .van-icon {
        font-family: "iconfont" !important;
        font-size: 16px;
        font-style: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        }
    .van-icon-arrow{
        transform:rotate(-90deg);
        &:before{
                content: "\e634";
            }
    }
    .router-slid-enter-active, .router-slid-leave-active {
        transition: all .4s;
    }
    .router-slid-enter, .router-slid-leave-active {
        transform: translate3d(2rem, 0, 0);
        opacity: 0;
    }
    .van-cell{
      height: 1.7rem;
    }

    .van-cell__title{
      flex: inherit;
      width: 14rem;
      overflow: hidden;
      span{
        height: 1rem;
        display: inline-block;
        font-size: .48rem;
      }
    }
    @media screen and (device-width: 320px) and (-webkit-device-pixel-ratio: 2){
      .van-cell{
        height: 2rem;
      }
      .van-cell__title{
        flex: inherit;
        width: 9rem;
        overflow: hidden;
        span{
          height: 1rem;
          display: inline-block;
          font-size: .48rem;
        }
      }
    }
</style>
